import { styled } from '@pigment-css/react';

export const MainContentContainer = styled.div(({ theme }) => ({
  boxSizing: 'content-box',
  maxWidth: 714,
  paddingTop: theme.vars.space[9],
  paddingLeft: theme.vars.space[6],
  paddingRight: theme.vars.space[6],
  marginLeft: 'auto',
  marginRight: 'auto',
  marginBottom: theme.vars.space[9],
  '@media (max-width: 1242px)': {
    marginRight: 'calc((100vw - 240px - 762px) / 2)',
  },
  '@media (max-width: 1002px)': { marginLeft: 'auto', marginRight: 'auto' },
}));

export const MainContent = styled.div({
  'p:not(.description)': {
    margin: '0',
    marginBottom: 'var(--space-4)',
    fontSize: 'var(--fs-4)',
    lineHeight: '23px',
    fontFamily: 'var(--ff-sans)',
    fontWeight: 'var(--fw-1)',
    color: 'var(--gray-text-2)',
    scrollMarginTop: '80px',
  },
  ul: {
    margin: '0',
    marginBottom: 'var(--space-4)',
    fontSize: 'var(--fs-4)',
    lineHeight: '23px',
    fontFamily: 'var(--ff-sans)',
    fontWeight: 'var(--fw-1)',
    color: 'var(--gray-text-2)',
    scrollMarginTop: '80px',
  },
  'ul p': { marginBottom: '0' },
  h1: {
    margin: '0',
    fontFamily: 'var(--ff-sans)',
    color: 'var(--gray-text-2)',
    scrollMarginTop: '80px',
    fontSize: 'var(--fs-8)',
    lineHeight: '37px',
    fontWeight: 'var(--fw-2)',
    letterSpacing: '-0.042em',
    textIndent: '-1.1px',
    marginBottom: 'var(--space-2)',
  },
  h2: {
    margin: '0',
    fontFamily: 'var(--ff-sans)',
    color: 'var(--gray-text-2)',
    scrollMarginTop: '80px',
    marginTop: 'var(--space-7)',
    marginBottom: 'var(--space-3)',
    fontSize: 'var(--fs-6)',
    lineHeight: '24px',
    fontWeight: 500,
    letterSpacing: '-0.018em',
  },
  h3: {
    margin: '0',
    fontFamily: 'var(--ff-sans)',
    color: 'var(--gray-text-2)',
    scrollMarginTop: '80px',
    marginTop: 'var(--space-7)',
    marginBottom: 'var(--space-2)',
    fontSize: 'var(--fs-5)',
    lineHeight: '23px',
    fontWeight: 'var(--fw-2)',
    letterSpacing: '-0.012em',
  },
  code: { fontFamily: 'var(--ff-code)' },
  'pre[data-language]': {
    position: 'relative',
    '&::after': {
      position: 'absolute',
      top: 5,
      right: 10,
      opacity: 0.5,
      fontSize: '0.8rem',
      content: 'attr(data-language)',
    },
  },
  ':not(pre) > code': {
    marginLeft: '1px',
    marginRight: '1px',
    boxSizing: 'border-box',
    fontFamily: 'var(--ff-code)',
    color: 'var(--gray-text-2)',
    fontSize: '0.89em',
    paddingRight: 'var(--space-1)',
    paddingBottom: '2px',
    paddingLeft: 'var(--space-1)',
    whiteSpace: 'break-spaces',
    border: '1px solid var(--gray-outline-1)',
    borderRadius: '6px',
    position: 'relative',
    top: '-0.5px',
  },
  figure: {
    boxSizing: 'border-box',
    marginLeft: '0',
    marginRight: '0',
    marginTop: 'var(--space-5)',
    marginBottom: 'var(--space-5)',
  },
  pre: {
    boxSizing: 'border-box',
    overflow: 'hidden',
    margin: '0',
    padding: 'var(--space-3) var(--space-4)',
    fontFamily: 'var(--ff-code)',
    fontSize: 'var(--fs-2)',
    lineHeight: '20px',
    whiteSpace: 'pre',
    color: 'var(--gray-text-1)',
    border: '1px solid var(--gray-outline-2)',
    borderRadius: 8,
  },
  kbd: {
    padding: '6px',
    display: 'inline-block',
    whiteSpace: 'nowrap',
    margin: '0px 1px',
    fontFamily: 'var(--ff-code)',
    fontSize: 'var(--fs-1)',
    color: 'var(--gray-text-2)',
    lineHeight: '10px',
    verticalAlign: 'middle',
    borderRadius: '6px',
    border: '1px solid var(--gray-outline-2)',
    backgroundColor: 'var(--gray-container-1)',
    boxShadow: 'inset 0 -2px 0 var(--gray-outline-2)',
  },
  table: { borderCollapse: 'collapse', marginBottom: 'var(--space-4)' },
  th: { fontWeight: 'var(--fw-2)' },
  'th,\n  td': {
    borderBottom: '1px solid var(--gray-outline-2)',
    padding: 'var(--space-3)',
  },
  strong: { fontWeight: 'var(--fw-2)' },
  a: {
    textDecorationLine: 'underline',
    textDecorationStyle: 'solid',
    textDecorationThickness: '1px',
    textUnderlineOffset: 'calc(0.1em + 3px)',
    color: 'inherit',
    position: 'relative',
    zIndex: 0,
  },
  '@media screen and (hover: hover)': {
    'a:hover': { textDecoration: 'none' },
    'a:hover::after': {
      content: "''",
      width: 'calc(100% + 6px)',
      height: 'calc(100% + 8px)',
      top: '-4px',
      left: '-3px',
      position: 'absolute',
      backgroundColor: 'var(--gray-container-1)',
      zIndex: -1,
    },
  },
});
